<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:c="http://www.w3.org/1999/html"
      xmlns:p="http://www.w3.org/1999/html">
<script src="js/jquery.min.js"></script>
<head>
    <meta charset="UTF-8">
    <title>Title</title>

        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">

        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
        <meta name="format-detection" content="telephone=no">
        <title>夏日速递</title>
        <script src="js/jquery.min.js"></script>
        <script src="js/bootstrap.min.js"></script>
        <script>
            $(function() {
                $(".meun-item").click(function() {
                    $(".meun-item").removeClass("meun-item-active");
                    $(this).addClass("meun-item-active");
                    var itmeObj = $(".meun-item").find("img");
                    itmeObj.each(function() {
                        var items = $(this).attr("src");
                        items = items.replace("_grey.png", ".png");
                        items = items.replace(".png", "_grey.png")
                        $(this).attr("src", items);
                    });
                    var attrObj = $(this).find("img").attr("src");
                    ;
                    attrObj = attrObj.replace("_grey.png", ".png");
                    $(this).find("img").attr("src", attrObj);
                });
                $("#topAD").click(function() {
                    $("#topA").toggleClass(" glyphicon-triangle-right");
                    $("#topA").toggleClass(" glyphicon-triangle-bottom");
                });
                $("#topBD").click(function() {
                    $("#topB").toggleClass(" glyphicon-triangle-right");
                    $("#topB").toggleClass(" glyphicon-triangle-bottom");
                });
                $("#topCD").click(function() {
                    $("#topC").toggleClass(" glyphicon-triangle-right");
                    $("#topC").toggleClass(" glyphicon-triangle-bottom");
                });
                $(".toggle-btn").click(function() {
                    $("#leftMeun").toggleClass("show");
                    $("#rightContent").toggleClass("pd0px");
                })
            })
        </script>
        <!--[if lt IE 9]>
        <script src="js/html5shiv.min.js"></script>
        <script src="js/respond.min.js"></script>
        <![endif]-->
        <link href="css/bootstrap.min.css" rel="stylesheet">
        <link rel="stylesheet" type="text/css" href="css/common.css" />
        <link rel="stylesheet" type="text/css" href="css/slide.css" />
        <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
        <link rel="stylesheet" type="text/css" href="css/flat-ui.min.css" />
        <link rel="stylesheet" type="text/css" href="css/jquery.nouislider.css">

</head>
<body>
<!--<div th:insert="manager::side"></div>-->
<!--<div th:insert="manager::cha"></div>-->
<!--th:fragment="side"-->
<div>
    <input type="button" id="btn" value="获取数据"/>
    <table width="40%" align="right">
        <tr>
            <td>电话</td>
            <td>密码</td>
            <td>用户权限</td>
        </tr>
        <tbody id="content">

        </tbody>
    </table>
</div>
<script>
    $(function ()
    {
        $("#btn").click(function (){
           $.ajax({
               url:"/list",
               success:function (data)
               {
                   console.log(data);
                   var html="";
                   for (var i=0;i<data.length;i++)
                   {
                       html += "<tr>"+
                      "<td>"+ data[i].phone+"</td>"+
                       "<td>"+ data[i].userpassword+"</td>"+
                       "<td>"+ data[i].userlimit+"</td>"+
                           "</tr>"
                   }
                  $("#content").html(html);

               }
           })
        })
    })

</script>
</body>
</html>